<template>
	<v-popup ref="vPopupRef" round>
		<div class="head padding">
			<div class="header">
				<image class="image" :src="parentMessage.avatar" mode="aspectFill"></image>
				<div class="info">
					<div class="name">{{ parentMessage.nickName }}</div>
					<div class="time">
						{{ parentMessage.commentTime }}

						<div class="kudos" @click.stop="favorite(parentMessage)">
							<!-- {{ parentMessage.thumbsUpNum }} -->
							<!-- <uni-icons
								:type="parentMessage.isThumbsUp ? 'hand-up-filled' : 'hand-up'"
								:style="{ color: parentMessage.isThumbsUp ? '#fe970f' : '' }"
								size="20"
							></uni-icons> -->
						</div>
					</div>
				</div>
			</div>
			<div class="message">{{ parentMessage.content }}</div>
		</div>
		<div class="reply plac" v-show="!list || !list.length"></div>
		<div class="reply padding" v-show="list && list.length">
			<div class="reply-item" v-for="(item, index) in list" :key="index">
				<div class="info">
					<span class="label">{{ item.nickName }}:</span>
					{{ item.content }}
				</div>
				<div class="btn">
					<div class="kudos" :class="item.isJump ? 'check' : ''" @click.stop="favorite(item)">
						<!-- {{ item.thumbsUpNum }} -->
						<div :class="item.isJump ? 'img-box-check' : ''">
							<uni-icons
								:type="item.isThumbsUp ? 'hand-up-filled' : 'hand-up'"
								:style="{ color: item.isThumbsUp ? '#fe970f' : '' }"
								size="20"
							></uni-icons>
						</div>
					</div>
					<div class="kudos" @click.stop="deleteComment(item)">
						<uni-icons type="trash" size="20"></uni-icons>
					</div>
				</div>
			</div>
		</div>
		<div class="send">
			<input v-model="sendMessage" placeholder="说点什么吧..." />
			<!-- <image class="icon" src="/static/image/smile.png"></image> -->
			<div
				class="span"
				:class="[
					{
						primary: !!sendMessage,
					},
				]"
				@click="sendFn"
			>
				发送
			</div>
		</div>
	</v-popup>
</template>

<script>
import mixins from "@/mixins"

let callback = null
export default {
	name: "comments-details",
	mixins: [mixins],
	data() {
		return {
			message: {},

			list: [],
			parentMessage: {},
			sendMessage: "",
			commentList: [],
			commentPage: 1,
			commentTotal: 0,
		}
	},
	computed: {},
	methods: {
		show(message, cb) {
			callback = cb
			this.message = message
			this.getDetails()
			this.$refs.vPopupRef.show()
		},

		async getDetails() {
			const data = await this.$axios.get("/api/member/memberComment/tree", {
				parentId: this.message.id,
			})

			this.list = data[0].children || []
			this.parentMessage = data[0]

			this.list.forEach(item => {
				item.isJump = false
			})
		},
		// async getCommentList() {
		// 	const data = await this.$axios.get("/api/member/memberComment/page", {
		// 		commentType: "00",
		// 		targetId: this.message.id,
		// 		current: this.commentPage,
		// 		size: 20,
		// 	})
		// 	this.commentList = this.commentList.concat(data.records)
		// 	this.total = data.total
		// 	// console.log(data)
		// },

		async sendFn() {
			if (!this.sendMessage) {
				return
			}
			try {
				const { id, parentId, avatar } = await this.$axios.post("/api/member/memberComment/save", {
					commentType: "00",
					isAnonymity: "2", // 是否匿名
					targetId: this.parentMessage.id,
					parentId: this.parentMessage.id, // 评论的上级 targetId不传时这个传课程的id
					content: this.sendMessage,
				})

				const content = {
					nickName: this.$store.state.user.userInfo.nickName,
					commentTime: "刚刚",
					thumbsUpNum: 0,
					isThumbsUp: false,
					content: this.sendMessage,
					id,
					parentId,
					avatar: avatar || this.$store.state.user.userInfo.avatar,
					memberId: this.$store.state.user.userInfo.id,
				}
				this.list.push(content)

				callback && callback(content)

				this.sendMessage = ""
			} catch (error) {
				uni.showToast({
					title: error,
					icon: "none",
					duration: 2000,
				})
			}

			// this.getCommentList()
		},
		favorite(item) {
			if (!item.id) return
			if (item.isThumbsUp) {
				item.isJump = false
				this.$axios.post("/api/member/memberThumbsUp/cancel", {
					targetId: item.id,
					type: "00",
				})
			} else {
				item.isJump = true
				this.$axios.post("/api/member/memberThumbsUp/save", {
					targetId: item.id,
					type: "00",
				})
			}
			item.isThumbsUp = !item.isThumbsUp
			// this.getCommentList()
		},
		deleteComment(item) {
			if (item.memberId == this.$store.state.user.userInfo.id) {
				uni.showModal({
					title: "提示",
					content: "确定要删除评论吗？",
					success: async res => {
						if (res.confirm) {
							try {
								await this.$axios.post("/api/member/memberComment/deleteById?id=" + item.id)
								let index = this.list.findIndex(item1 => item1.id == item.id)
								this.list.splice(index, 1)
								// this.$emit("delete")
							} catch (error) {
								console.log(error)
							}
						} else if (res.cancel) {
						}
					},
				})
			} else {
				uni.showToast({
					title: "只能删除自己的评论",
					icon: "none",
				})
			}
		},
	},
}
</script>

<style lang="scss" scoped>
.head {
	padding-top: 60rpx;
	.header {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		.image {
			width: 85rpx;
			height: 85rpx;
			border-radius: 50%;
			display: block;
			margin-right: 15rpx;
			flex: none;
		}
		.info {
			flex: 1;
			.name {
				font-size: 24rpx;
				padding-top: 7rpx;
				padding-bottom: 7rpx;
			}
			.time {
				color: #acacac;
				font-size: 24rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				.kudos {
					margin-left: auto;
					.icon {
						width: 28rpx;
						height: 26rpx;
						margin-left: 5rpx;
					}
				}
			}
		}
	}

	.message {
		padding-left: 100rpx;
		color: #454545;
		font-size: 28rpx;
		padding-top: 15rpx;
		padding-bottom: 20rpx;
		word-break: break-all;
	}
}
.reply {
	padding-bottom: 26rpx;
	position: relative;
	border-bottom: 1px solid #f5f5f5;
	margin-left: 100rpx;
	color: #454545;
	padding-left: 22rpx;
	font-size: 24rpx;
	background: #f5f5f5;
	width: 570rpx;
	border-radius: 15rpx;
	padding-block: 20rpx;
	margin-bottom: 150rpx;
	&.plac {
		background: transparent;
	}
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 4rpx;
		height: 50rpx;
		background: #f9f9f9;
	}
	.reply-item {
		padding-bottom: 20rpx;
		padding-top: 10rpx;
		// line-height: 1.6;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		&:last-child {
			padding-bottom: 0;
		}
	}
	.info {
		flex: 1;
		padding-right: 20rpx;
		word-break: break-all;
	}
	.btn {
		display: flex;
		gap: 10rpx;
		justify-content: center;
		align-items: center;
	}
	.label {
		color: $primary;
		margin-right: 10rpx;
	}
	.kudos {
		text-align: center;
		display: inline-block;
		margin-left: auto;
		border-radius: 50%;
		padding: 4rpx;
		.icon {
			width: 28rpx;
			height: 26rpx;
			margin-left: 5rpx;
		}
	}
	.check {
		animation: shade 0.5s;
		transition: all 0.5s;
	}
	.img-box-check {
		text-align: center;
		animation: kudos 0.5s;
		-moz-animation: kudos 0.5s;
		-webkit-animation: kudos 0.5s;
		-o-animation: kudos 0.5s;
	}
	@keyframes kudos {
		0% {
			transform: scale(0);
			-webkit-transform: scale(0);
			-moz-transform: scale(0);
		}
		50% {
			transform: scale(1.3);
			-webkit-transform: scale(1.3);
			-moz-transform: scale(1.3);
		}
		100% {
			transform: scale(1);
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
		}
	}
	@keyframes shade {
		0% {
			transform: scale(0);
			-webkit-transform: scale(0);
			-moz-transform: scale(0);
			box-shadow: 0px 0px 0px 15rpx rgba(254, 151, 15, 0);
		}
		50% {
			transform: scale(1.3);
			-webkit-transform: scale(1.3);
			-moz-transform: scale(1.3);
			box-shadow: 0px 0px 0px 15rpx rgba(254, 151, 15, 0.1);
		}
		100% {
			transform: scale(1);
			-webkit-transform: scale(1);
			-moz-transform: scale(1);
			box-shadow: 0px 0px 0px 15rpx rgba(254, 151, 15, 0);
		}
	}
}
.send {
	background-color: #fff;
	position: fixed;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 112rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #f1f1f1;
	padding: 0 30rpx;
	.span {
		color: #cbcbcb;
		&.primary {
			color: #3c9cff;
		}
	}
	.icon {
		width: 43rpx;
		height: 43rpx;
		margin-right: 10rpx;
	}
	input {
		flex: 1;
	}
}
</style>
